<script setup>
import { ref } from 'vue'
import GameItem from './GameItem.vue'
import { useRouter } from 'vue-router'
import { fetchRecommendList, fetchGameList } from '@/api/game'
const router = useRouter()
let buttonColo = ref('#f5f5f5')

let textColor = ref('#818181')
let list = [1, 2, 3, 4]
// 获取整个窗口的宽度
var windowWidth = window.outerWidth
console.log('窗口宽度: ' + windowWidth)
let swipeWidth = windowWidth - 60

const props = defineProps({
  itemTitle: {
    type: String,
    default: '', //
  },
})

const gotoList = (id) => {
  console.log('gotoList')
  router.push({
    name: 'ApplicationListMoblie',
    params: {
      id,
    },
  })
}

// const recommendListData = ref([])
// const recommendlength = ref(0)
// const getRecommendList = async () => {
//   let data = await fetchRecommendList({})
//   // console.log(JSON.parse(data))
//   let recommendList = data

//   recommendListData.value = chunkArray(recommendList, 2)
// }
// getRecommendList()

// 获取首页"游戏列表"列表
let gameDataList = ref([])
const getNewList = async () => {
  let data = await fetchGameList({})
  let gameData = data
  gameDataList.value = chunkArray(gameData, 6)
  if (gameDataList.value.length < 2) {
    gameDataList.value = [...gameDataList.value, ...gameDataList.value]
  }
}
getNewList()

// 分割数组
const chunkArray = (array, chunkSize) => {
  let result = []
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize))
  }
  return result
}

// 使用示例
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const chunkedArray = chunkArray(array, 5)
console.log(chunkedArray) // 输出: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]]
</script>
<template>
  <div class="application-item-list">
    <div class="item-list-top">
      <div class="item-list-top-title">
        <div>{{ itemTitle }}</div>
        <div class="check-all" @click="gotoList()">{{ $t('Viewall') }}</div>
      </div>
      <div class="item-list-tip" v-if="gameDataList.length > 1">{{ $t('Viewall') }}</div>

      <van-swipe class="my-swipe" indicator-color="white" :width="swipeWidth">
        <van-swipe-item
          v-for="(itemList, index) in gameDataList"
          :key="index"
          class="my-swipe-item"
        >
          <GameItem
            v-for="(item, index) in itemList"
            :key="index"
            class="application-box-introduce"
            :buttonColo="buttonColo"
            :itemType="'cloud'"
            :btnType="'gain'"
            :itemData="item"
            :textColor="textColor"
          ></GameItem
        ></van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.application-item-list {
  padding: 10px 0px;
  border-radius: 12px;
}
.item-list-tip {
  color: var(--op-gray-font-color);
}
.item-list-top-title {
  font-weight: bold;
  font-size: 22px;
  margin-top: 6px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: 6px;
  .check-all {
    font-size: 15px;
    color: #0d7ffe;
    font-weight: 400;
  }
}
.application-box-introduce {
  margin-right: 10px;
}
.my-swipe .my-swipe-item:last-of-type {
  margin-right: 0px;
}
</style>
